import _ from 'lodash';
import { onMounted, onUnmounted } from 'vue';

function triggerScale(options = {}) {
  const targetX = options.width || 1920;  //  设计稿宽度
  const targetY = options.height || 1080;  //  设计稿高度
  const targetRatio = options.ratio || 16 / 9;  //  屏幕的宽高比例， 为了缩放比

  //  拿到当前设备（浏览器）的宽高 
  const currentX = document.documentElement.clientWidth || document.body.clientWidth;
  const currentY = document.documentElement.clientHeight || document.body.clientHeight;

  //  计算屏幕的缩放比例  - 竖屏，默认
  let scaleRatio = currentX / targetX;  //  参照宽度进行缩放 （默认情况）
  let currentRatio = currentX / currentY;

  //  处理超宽屏 - 宽高比 较大 （带鱼屏） - 横屏
  if(currentRatio > targetRatio) {
    scaleRatio = currentY / targetY;  //  参照高度进行缩放

    document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio}) translateX(-50%); left: 50%`; //  超长屏居中
  } else {
    document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`; //  原点 0 0 0
  }
} 

export function useScalePage(options = {}) {
  const listenScale = _.throttle(() => {
    triggerScale(options)
  }, 100);

  onMounted(() => {
    triggerScale(options);

    //  监听屏幕尺寸的变化
    window.addEventListener('resize', listenScale, false);
  })

  onUnmounted(() => {
    window.removeEventListener('resize', listenScale, false);
  })
}